import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Table, Tag } from 'antd';

const FormItem = Form.Item;

@connect(({ localpolicy, loading }) => ({
  localpolicy,
  loading: loading.models.localpolicy,
}))
@Form.create()
class BasicList extends PureComponent {
  render() {
    const {
      fiverisks,
      areaNames,
      addDataSource1,
      addDataSource2,
      policyParamInfo,
      costCenterList,
    } = this.props;
    const perCategoryColumnsone = [
      {
        title: '险种',
        dataIndex: 'assName',
        align: 'center',
        width: 100,
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      // {
      //   title: '可补缴月数',
      //   dataIndex: 'plcyPkgMkupPayMth',
      //   align: 'center',
      //   width: 134,
      //   onHeaderCell: () => ({
      //     style: {
      //       fontWeight: 'bold',
      //     },
      //   }),
      // },
      {
        title: '增员',
        dataIndex: 'plcyPkgAddDeclPlcyName',
        align: 'center',
        width: 200,
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
      {
        title: '减员',
        width: 200,
        dataIndex: 'plcyPkgDeduDeclPlcyName',
        align: 'center',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
      },
    ];

    this.searchLayout = {
      labelCol: { md: { span: 21 } },
      wrapperCol: { md: { span: 3 } },
    };

    this.searchLayouttwo = {
      labelCol: { md: { span: 21 } },
      wrapperCol: { md: { span: 3 } },
    };

    return (
      <div style={{ marginLeft: '25px', marginRight: 30, width: '100%' }}>
        <Row>
          <Col
            md={8}
            style={{
              height: '48px',
              lineHeight: '48px',
              display: 'flex',
              color: '#343434',
            }}
          >
            地区：
            <span style={{ color: '#343434' }}>{areaNames}</span>
          </Col>

          <Col md={8} style={{ height: '48px', lineHeight: '48px', color: '#343434' }}>
            是否五险合一申报：
            {fiverisks ? <span>{fiverisks && String(fiverisks) === '1' ? '是' : '否'}</span> : null}
          </Col>
          <Col
            md={8}
            style={{
              height: '48px',
              lineHeight: '32px',
              display: 'flex',
              color: '#343434',
            }}
          >
            社保年度起始月：
            <span style={{ paddingLeft: 8 }}>
              {(policyParamInfo && policyParamInfo.insBeginMth) || null}
            </span>
            <span style={{ paddingLeft: 8, lineHeight: '32px' }}>月</span>
          </Col>
        </Row>
        <Row>
          <Col
            md={8}
            style={{
              height: '48px',
              lineHeight: '32px',
              display: 'flex',
              color: '#343434',
            }}
          >
            公积金年度起始月：
            <span style={{ paddingLeft: 8 }}>
              {(policyParamInfo && policyParamInfo.accuBeginMth) || null}
            </span>
            <span style={{ paddingLeft: 8, lineHeight: '32px' }}>月</span>
          </Col>
          <Col md={8} style={{ height: '48px', lineHeight: '32px', display: 'flex' }}>
            是否区分缴费人员类别：
            <span
              style={{
                paddingLeft: policyParamInfo && policyParamInfo.hshdRegFlagName ? 0 : '15px',
              }}
            >
              {(policyParamInfo && policyParamInfo.hshdRegFlagName) || null}
            </span>
          </Col>
        </Row>
        <div style={{ clear: 'both' }} />
        {policyParamInfo && String(policyParamInfo.hshdRegFlagName) === '是' ? (
          <div>
            <span style={{ float: 'left', color: '#343434', lineHeight: '22px' }}>
              缴费人员类别：
            </span>
            {costCenterList.map((itemcost, indexcost) => (
              <Tag
                color={String(indexcost) === '0' ? 'blue' : ''}
                style={{ margin: '0 8px 16px 0' }}
              >
                {itemcost.ideName}
              </Tag>
            ))}
          </div>
        ) : null}

        <Table
          bordered
          dataSource={String(fiverisks) === '2' ? addDataSource1 : addDataSource2}
          columns={perCategoryColumnsone}
          pagination={false}
          style={{
            backgroundColor: '#fff',
            textaAlign: 'center',
            width: '634px',
            marign: '8px',
          }}
        />
      </div>
    );
  }
}

const BasicListFrom = Form.create()(BasicList);
export default BasicListFrom;
